<script setup lang="ts">
import { defineAsyncComponent, ref, watch } from "vue";
import leftCompWrapper from "../common/leftCompWrapper.vue";
import Ball from "@visual/assets/icon/ball.svg?component";
import ReTextTooltip from "../../../components/ReTextTooltip";
import { convertStringToNumber } from "@visual/utils";

defineOptions({
  name: "ThreeSupervison"
});
const props = withDefaults(
  defineProps<{
    propValue?: {
      attrs: Array<any>;
      children: Array<any>;
      title?: string;
      iconName?: string;
    };
  }>(),
  {
    propValue: () => ({
      iconName: "",
      attrs: [],
      children: [],
      title: ""
    })
  }
);
let compArr = ["humidity", "methane", "temperature"];
const imgMap = {};
for (let i = 0; i < compArr.length; i++) {
  let comp = defineAsyncComponent(() => import(`../../assets/${compArr[i]}.svg?component`));

  imgMap[compArr[i]] = comp;
}
const classes = (type: number) => {
  return {
    "list-item-content-normal": true
  };
};
const classesDetect = (type: number) => {
  let types = [0, 1, 2, 3];
  return {
    "list-item-color-normal": type === 0,
    "list-item-color-warn": type === 1,
    "list-item-color-error": type === 2,
    "list-item-color-offline": type === 3,
    "list-item-color-defalut": !types.includes(type)
  };
};
const overview = ref([]);
const supervison = ref({ name: "", children: [] });
const status = ref([]);
watch(
  () => props.propValue.children,
  newVal => {
    let status1 = "LL MM HH L M H";
    let status2 = "正常 异常 报警";

    if (newVal && newVal.length > 0) {
      newVal.forEach(item => {
        let itemTmpl = { name: "", type: "", attrs: [] };
        let process1 = [];
        let process2 = [];
        item?.attrs.forEach(member => {
          if (member.unit) {
            if (!itemTmpl.name) {
              itemTmpl.name = item.name;
              itemTmpl.type = "overview";
            }
            itemTmpl.attrs.push(member);
          } else if (status2.indexOf(member.value) !== -1) {
            if (!itemTmpl.name) {
              itemTmpl.name = item.name;
              itemTmpl.type = "status2";
            }
            itemTmpl.attrs.push(member);
          } else if (status1.indexOf(member.value) !== -1) {
            // if (!itemTmpl.name) {
            //   itemTmpl.name = item.name;
            //   itemTmpl.type = "process2";
            // }
            process2.push(member);
          } else {
            // if (!itemTmpl.name) {
            //   itemTmpl.name = item.name;
            //   itemTmpl.type = "process1";
            // }
            process1.push(member);
          }
        });
        if (itemTmpl.type == "overview") {
          overview.value.push(itemTmpl);
        } else if (itemTmpl.type == "status2") {
          status.value.push(itemTmpl);
        }
        if (process2.length > 0) {
          supervison.value.name = item.name;
          supervison.value.children[1] = process2;
        }
        if (process1.length > 0) {
          supervison.value.name = item.name;
          supervison.value.children[0] = process1;
        }
      });
    }
  },
  { immediate: true }
);
</script>

<template>
  <leftCompWrapper :title="props.propValue.title" :iconName="propValue.iconName">
    <px-scrollbar wrap-class="list-warpper">
      <!-- 总览 -->
      <div v-for="(itemTmpl, index) in overview" :key="index" class="list-item">
        <div class="list-item-title">{{ itemTmpl.name }}</div>
        <div class="list-item-content">
          <div v-for="member in itemTmpl.attrs" :key="member.tagNum" class="list-item-content-item">
            <component :is="imgMap[member.icon]" class="list-icon" :class="classes(member.status)" />
            <div class="list-item-val-title">
              <div class="list-item-content-title">{{ member.title }}</div>
              <div class="list-item-content-val">
                <span :class="classes(member.status)">{{ member.value }}</span
                >{{ member.unit }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 监测 -->
      <div v-if="supervison.children.length > 0" class="list-item">
        <div v-if="supervison.name" class="list-item-title">{{ supervison.name }}</div>
        <div v-for="(item, index) in supervison.children[0]" :key="item.tagNum ? item.tagNum : index" class="progress-item">
          <div class="progress-title w-[150px]">
            <ReTextTooltip :content="item.title" />
          </div>
          <px-progress class="progress-self" :text-inside="true" :stroke-width="20" :percentage="item.value" />
        </div>
        <div v-for="(item, index) in supervison.children[1]" :key="item.tagNum ? item.tagNum : index" class="progress-item">
          <div class="progress-title w-[150px]">
            <ReTextTooltip :content="item.title" />
          </div>
          <px-tag class="ml-[10px] min-w-[50px]" effect="dark" round>
            {{ item.value }}
          </px-tag>
        </div>
      </div>
      <!-- 状态 -->
      <div v-for="(itemTmpl, index) in status" :key="index" class="list-item">
        <div class="list-item-title">{{ itemTmpl.name }}</div>
        <div
          v-for="(item, index) in itemTmpl.attrs"
          :key="item.tagNum ? item.tagNum : index"
          class="border-dashed border-b-[1px] border-[#C6C6C6] list-item-content-detect"
        >
          <div class="list-item-content-title">{{ item.title }}</div>
          <!-- <div class="border-dashed border-[#C6C6C6] scale-90 border-t-[1px] max-w-[50%] grow h-[1px]" /> -->
          <div class="flex items-center content-center">
            <Ball
              v-show="['异常', '正常', '报警'].indexOf(item.value) !== -1"
              :class="{ 'text-[#10b981]': item.value === '正常', 'text-[#ef4444]': ['异常', '报警'].indexOf(item.value) !== -1 }"
            />
            <span :class="classes(item.status)">{{ convertStringToNumber(item.value) }}</span>
          </div>
        </div>
      </div>
    </px-scrollbar>
  </leftCompWrapper>
</template>

<style lang="scss" scoped>
.list-warpper {
  display: flex;
  flex-flow: column wrap;
  width: 100%;

  .title-list {
    display: flex;
    align-items: center;
    width: 100%;
    height: auto;
    padding: 12px;
    margin-top: 12px;
    background: #feecec;
    border: 1px solid #fac7c7;
    border-radius: 4px;

    img {
      width: 48px;
      height: 48px;
    }

    .title-list-val-title {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin-left: 20px;
      font-size: 14px;
      font-weight: normal;

      .title-list-content-val {
        align-self: start;
        margin-top: 4px;
        font-size: 18px;
        font-weight: 700;
      }
    }
  }

  .list-icon {
    width: 30px;
    height: 34px;
  }

  .list-item {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: auto;
    margin-bottom: 8px;

    .list-item-title {
      margin-top: 16px;
      margin-bottom: 8px;
      font-size: 14px;
      font-weight: 700;
      line-height: 22px;
      color: #000;

      &::before {
        display: inline-block;
        width: 3px;
        height: 16px;
        margin-right: 6px;
        vertical-align: middle;
        content: "";
        background: #3b82f6;
        border-radius: 0 100px 100px 0;
      }
    }

    .list-item-content {
      display: flex;
      flex-flow: row wrap;
      width: 100%;
      font-size: 16px;
      font-weight: 700;
      line-height: 17px;
      color: #000;

      .list-item-content-item {
        display: flex;
        align-items: center;
        width: 33%;

        .list-item-val-title {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          font-size: 14px;
          font-weight: normal;

          .list-item-content-val {
            align-self: start;
            margin-top: 4px;
            font-size: 18px;
            font-weight: 700;
          }
        }
      }
    }

    .list-item-content-error {
      color: #f87171;
    }

    .list-item-content-warn {
      color: #fbbf24;
    }

    .list-item-content-normal {
      color: #000;
    }
  }

  .progress-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    height: 20px;
    margin-top: 16px;
    font-size: 14px;

    .progress-self {
      flex-grow: 1;
      min-width: 50%;
      padding-right: 12px;
      padding-left: 12px;
      margin-left: 10px;

      :deep(.px-progress-bar__outer) {
        border-radius: 2px;
      }

      :deep(.px-progress-bar__inner) {
        border-radius: 0;
      }
    }
  }

  .list-item-content-detect {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    font-weight: 400;
    line-height: 14px;
    color: #000;
  }
}
</style>
